Aaron9999's Guide to Source Mode
'Source Mode for Dummies' Source Mode is a synonym to View Source, or the Source Editor, where the majority of Wikia Coding has to be used in order to function properly. Wikia Coding is used to customize pages to have different variations of layouts and colors. Before learning how Source Mode works, it can seem like a bunch of letters and symbols that are impossible to understand. But once one learns how it works, its not very complicated at all, and is easy to understand when there's a problem with Visual Mode, a complication on preview, or when published. Benefits of having knowledge of Source Mode include being able to: *Create userboxes and have them judged for approval. *Quickly add font weights, like bold, italic, or both. *Add color boxes on pages and box shadows. *Add a different color and font type to text on pages. *Understand how to add Background Music coding to template pages, with the help of an admin or bureaucrat if your an unpromoted user or rollback. *Turn your information into a tabview for tabs on each branch of information about you. *Make tables/charts for a topic's statistics. *Add polls to a page. *Resize and add pictures to a specific spot on your page. *Insert Bulleted lists, Numbered, or Indented sections of text. Note: Some Wikia coding forms are much more complex than other's, but can prove more effective. Another Note: Click the arrow on the top right corner of this chart cutoff to view the full chart. 'Tips before proceeding to learn Wikia Coding' Note: Disregard this section if you already have experience with Wikia Coding. *You don't always have to type the coding, you can copy and paste from somewhere on the wiki. However, you should only do this sparingly. *You will encounter complications with Preview and when you Publish a page, occasionally. *Learning Wikia Coding takes effort if you don't have experience with coding, you don't learn it in one day. It can take weeks for some people, so don't get frustrated if you don't understand it the first few days. *Some Coding will be to complex to edit Visual Mode, so Preview will become your 'Best Friend' when learning Wikia Coding. *Once you know Source Mode, you'll likely edit in that even for just plain text. 'Types of Source Mode Coding' Let's say there's 3 levels of Wikia Coding. Basic, Average, and Advanced Wikia Coding. If you follow this guide correctly, and don't try to wing it, you'll likely learn something, even if you already knew most Wikia Coding. 'Basic Wikia coding' When you start to learn Source Mode, you likely have no understanding of it whatsoever. But, this guide will teach you how it works. Let's start with the basics. 'Horizontal Dividing Lines' This is arguably, the easiest coding in Source Mode. Below is the coding that is needed for Horizontal Dividing Lines. Example: Sword Dagger Doll Staff What it should look like: Sword Dagger Doll Staff Note: These should not be used to substitute a section heading, as the section will not show up in the Table of Contents without a Section Heading. 'Bold Text' When editing in source mode, the easiest way to make text bold is by putting three apostrophes by the start and end of each sentence. Example: I found me a Legendary Blade earlier, when the sun was still risin'. What it should look like: I found me a Legendary Blade earlier, when the sun was still risin'. 'Italic Text' Like Bold Text, the easiest way to make text italic is by putting apostrophes by the start and end of each sentence, except you put two apostrophes, instead of three. Example: I found me a Legendary Blade earlier, when the sun was still risin'. What it should look like: I found me a Legendary Blade earlier, when the sun was still risin'. 'Bold And Italic' Like Bold Text and Italic Text, the easiest way to combine these font weights in Source Mode is with apostrophes at the end and start of each sentence, but instead you put five apostrophes. Example: I found me a Legendary Blade earlier, when the sun was still risin'. What it should look like: I found me a Legendary Blade earlier, when the sun was still risin'. 'Bulleted List' This is quite easy to do. It's simply done with asterisks at the beginning of each source mode coding line. A bullet is indented further with more Example: *1 Skull Chest **2 Skull Chests ***3 Skull Chests What it should look like: *1 Skull Chest **2 Skull Chests ***3 Skull Chests 'Numbered List' This is similar to Bulleted Lists, except you use Number signs (#) instead of Asterisk signs (*). The number increases with the number of # signs. Example: #1 Skull Chest ##2 Skull Chests ###3 Skull Chests What it should look like: #1 Skull Chest ##2 Skull Chests ###3 Skull Chests 'Definition List' These are good for defining a word or term to somebody, should they ask you about it, and you know what that term they ask about is. Below is the coding required To do this. Example: ;Loot Container: consists of items that may be dropped by a enemy or enemy ship. ;In a Loot Container, I found me a Legendary Blade earlier, while the sun was still risin. ;A Loot Container can contain anything lootable, from clothes, weapons, to ammo. In this case, it was a Legendary Blade. What it should look like: ;Loot Container :consists of items that may be dropped by an enemy or enemy ship. ;In a Loot Container, I found me a Legendary Blade earlier, while the sun was still risin'. ;A Loot Container can contain anything lootable, from clothes, to weapons, to ammo. In this case, it was a Legendary Blade. 'Breaking Lines' Breaking Lines is very simple in source mode, and can be used to break a line without starting a new paragraph. It is preferred you do this sparingly. Example: I found me a Legendary Blade earlier, when the sun was still risin', and also found a Famed Cursed Blade, under the creakin' cave ceiling of Isla Tormenta's Cursed Caverns. What it should look like when published: I found me a Legendary Blade earlier, when the sun was still risin', and also found a Famed Cursed Blade, under the creakin' cave ceiling of Isla Tormenta's Cursed Caverns. 'Indenting' Indenting is simple to do. It is triggered by a colon sign (:) at the beginning of a line of coding. Lines indent further with more colons. Example: :1 Skull Chest ::2 Skull Chests :::3 Skull Chests What it should look like when published: :1 Skull Chest ::2 Skull Chests :::3 Skull Chests 'Sections and Subsections' Sections and Subsections are used, and are used to divide text into sections. Below is how to use them. Example: Section Heading Subsection Smaller Subsection Even Smaller Subsection What it should look like: Section Heading Subsection Smaller Subsection Even Smaller Subsection 'Average Wikia Coding' After learning the basics of Source Mode, you should have a little bit of understanding about Source Mode. Longer lines of letters and symbols won't be as complicated from here on out. 'Redirecting Links' This is useful for allowing to include a link within a few letters of information, or text. #Put a at the start of the link. #Type the link. #Type a forward slash at the end. #Type a space. #Type what text you want to show on the link redirection. #End the redirection with a bracket. Example: Our Sister Site. What it should look like: Our Sister Site. 'Font Color' Font Color can be added by inserting the following coding below. Example: I found me a Legendary Blade earlier, when the sun was still risin'. What it should look like: I found me a Legendary Blade earlier, when the sun was still risin'. 'Font Type' Font type enables you to change the font on a page, but only font's that you have or the user viewing has, will be come up a different font to you/them. Example: I found me a Legendary Blade earlier, when the sun was still risin'. What it should look like: I found me a Legendary Blade earlier, when the sun was still risin'. 'Font Size' This is good for when you have a huge page with multiple sections of different importancy. Example: I found me a Legendary Blade earlier, while the sun was still risin'. What it should look like: I found me a Legendary Blade earlier, while the sun was still risin'. 'Combining the 3 Font Codings' It's recommended to use just Font Type and Font Color if your editing a page, preferrably your profile page. However, it isn't mandatory for blogs and profile pages. Example: I found me a Legendary Blade earlier, while the sun was still risin'. What it should look like: I found me a Legendary Blade earlier, while the sun was still risin'. 'Galleries' Galleries are better alternatives for slideshows. Each picture shows separately without changing, instead of 1 at a time. Example: Red Color Gallery.png|Red Orange Color Gallery.png|Orange Yellow Color Gallery.png|Yellow What it should look like: Red Color Gallery.png|Red Orange Color Gallery.png|Orange Yellow Color Gallery.png|Yellow 'Polls' Polls are for asking yer mates their opinion on a specific topic. They can be about anything POTCO related, or about something else. Note: It's recommended you only use topics related to POTCO. Example: What's yer favorite color? Red Orange Yellow What it should look like: What's yer favorite color? Red Orange Yellow Note: This poll is only meant for show, not to be voted on. 'Tabviews' Tabviews are for user profile pages and work by creating links for each tab. They can be inserted in background boxes. Example: User:Aaron9999/About Me|About Me User:Aaron9999/Userboxes|Userboxes User:Aaron9999/Loot|Loot What it should look like: User:Aaron9999/About Me|About Me User:Aaron9999/Userboxes|Userboxes User:Aaron9999/Loot|Loot Note:The text after the | symbol doesn't have to be the same as the text after the forward slash (/). To prevent unused pages, I used a few tabs from the tabview on my Profile Page. Also, there won't be the colored text. Just the tabview. 'Inserting Images into a Corner of your Screen' This is not very hard to do, if you understand what each part of the coding does. It inserts an image into a corner of your screen. Example: What it should look like: Go here to see what it should look like. Note: It is recommended that images no larger than 250px are inserted on the screen. 'Fitting Userbox Babels and Pictures in Background Boxes' Many people have the issue that userboxes babels and pictures show up outside the background box or tabview. This simply coding fixes that, and fits it with the tabview. Example: Note: The Babel Spacer is only necessary if you have a background box. 'Advanced Wikia Coding' This is where coding gets complicated if your learning source mode. It has to be done in certain layouts, otherwise one of few things will happens, including not showing up, or showing up as a bunch of plain text. From here, it turns into multiple lines of coding for types of Wikia Coding of equal or bigger difficulty. 'Babel (Improved)' Although seeming the same, the coding provided below gets rid of random spaces between userboxes in the regular {{Babel template. Example: Note: if you want the Babel to the right, switch "left" with "right and add Right in front of |{{Babel. This is only visible with a list of userboxes under |{{Babel. 'Background Box Color' Background Color Boxes are only preferred for User's profile pages on this wiki, and it is very likely that's the only way it will be used on this wiki. Example: I found me a Legendary Blade earlier, when the sun was still risin'. What it should look like: I found me a Legendary Blade earlier, when the sun was still risin'. 'Box Shadows' Box Shadows can be used to make something really "Pop Out", or make a page look more decorated with color. It can be used by itself in a coding piece. Example: I found me a Legendary Blade earlier, when the sun was still risin'. What it should look like: I found me a Legendary Blade earlier, when the sun was still risin'. 'Borders' Like Box Shadows, Box Borders can be used to make something really "Pop Out". The difference is, Box Shadows attach to the Box Border. It can be used by itself as well. Example: I found me a Legendary Blade earlier, when the sun was still risin'. What it should look like: I found me a Legendary Blade earlier, when the sun was still risin'. 'Background Music' Many users have Background Music by using a playlist from youtube. Below is the coding from my MediaWiki Background Music page. Note that this needs to be followed by the Bulleted List. *This requires a youtube account, or help from somebody with a youtube account. #Go to Add To on a video. #Click the "Enter new Playlist Name" in the box below any playlists you may have. #Type the name you want for the playlist, then click Create. The video you created the playlist on will automatically be added. #Get the songs you want on the playlist. #Go to share, click Embed. #In the coding below, put the embedding link between the two quotation marks in front of src= and behind &autoplay=1". #If your not an admin or bureaucrat, have one paste the coding into a MediaWiki page. Preferably a name you go by on the wiki then Music. Example: AaronMusic Example: Note: This only works if the videos are not copyright, and if the coding is pasted into a MediaWiki page. 'Tables' Tables are great for displaying data over different calculations. An example would be a weapon's damage over ranks. Example: What it should look like: 'Gradients' Gradients are possibly the most advanced in coding you can get outside of mediawiki. It takes several lines to code in source mode, and are too complex in coding to edit in the visual editor. Example: What it should look like: Note: the rest of the coding is on the farther right of the scroll view, 'Guide Notes' *'For users trying to learn source mode, it's highly recommended you learn the coding from the basics first. Don't make a huge jump and try to learn Advanced coding right when you start.' *'Some coding may require skipping lines in order to function properly.' *'If you don't understand something on the guide, after following my advisements, it's ok to ask me for help here or in the comments below.' Category:Guides Category:Star Rated Guides